<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>游客服务</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			ul {
				list-style: none;
			}

			.center {
				width: 1000px;
				margin: 0 auto;
			}

			body {
				background-color: #F8F8F8;
			}

			/* 大的背景图 */
			.service_bg {
				position: relative;
				height: 300px;
			}

			.service_bg img {
				position: absolute;
			}

			.service_bg h1 {
				position: absolute;
				top: 50px;
				left: 150px;
				color: #fff;

			}

			.service_bg p {
				position: absolute;
				top: 60px;
				left: 300px;
				color: #fff;
				font-size: 18px;
			}


			/******************* 主要服务区 **********************/
			.service {
				margin-top: 50px;
			}

			.service .main {
				display: flex;
			}


			/******************左侧菜单区***************************/
			.service .main .menu {
				width: 200px;
				flex-shrink: 0;
				background-color: #fff;
				margin-right: 10px;
			}

			.menu ul {
				display: flex;
				flex-direction: column;
			}

			.menu ul li {
				padding: 10px;
				height: 150px;
				text-align: center;
			}

			.menu ul li div {
				width: 80px;
				height: 80px;
				margin: 0 auto;
				border-radius: 50%;
			}

			.menu ul li .icon1 {
				background: #ddd url(img/service_icon.png) no-repeat 20px 15px;
			}

			.menu ul li .icon1:hover {
				background-color: red;
			}

			.menu ul li .icon2 {
				background: #ddd url(img/service_icon.png) no-repeat -272px -280px;
			}

			.menu ul li .icon2:hover {
				background-color: orange;
			}

			.menu ul li .icon3 {
				background: #ddd url(img/service_icon.png) no-repeat -178px 20px;
			}

			.menu ul li .icon3:hover {
				background-color: greenyellow;
			}

			.menu ul li .icon4 {
				background: #ddd url(img/service_icon.png) no-repeat -275px 20px;
			}

			.menu ul li .icon4:hover {
				background-color: bisque;
			}

			.menu ul li p {
				color: #aaa;
				margin-top: 10px;
			}

			/**************详情介绍区************************/
			.service .main .detail {
				width: 800px;
				flex-grow: 1;
				background-color: #fff;
			}

			/* 导游区 */
			.service .guide>h4 {
				border-left: 4px solid #3A97E6;
				margin: 10px 15px;
				padding: 0 5px;
			}

			.service .guide ul li {
				display: flex;
				background-color: #f8f8f8;
				padding: 10px 15px;
				width: 90%;
				margin: 0 auto;
			}

			.service .guide ul li img {
				display: block;
				margin-right: 20px;
			}

			.service .guide ul li .introduce>div {
				display: flex;
				margin: 10px 0;
				color: #555;
			}

			.service .guide ul li .introduce>div h4 {
				color: #EF8F4C;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
		<div class="service_bg">
			<img src="img/service/service.jpg" alt="">
			<h1>游客服务</h1>
			<p>为您提供贴心的服务</p>
		</div>
		<div class="service">
			<div class="center">
				<div class="main">
					<div class="menu">
						<ul>
							<li>
								<div class="icon1"></div>
								<p>交通查询</p>
							</li>
							<li>
								<div class="icon2"></div>
								<p>导游</p>
							</li>
							<li>
								<div class="icon3"></div>
								<p>旅游须知</p>
							</li>
							<li>
								<div class="icon4"></div>
								<p>投诉热线</p>
							</li>
						</ul>
					</div>
					<div class="detail">
						<div class="guide">
							<h4>导游</h4>
							<ul>
								<li>
									<img src="img/guide/1.jpg">
									<div class="introduce">
										<div>
											<h4>姓名：</h4>
											<p>黄珍英</p>
										</div>
										<div>
											<h4>单 位：</h4>
											<p>嵊泗县辉煌旅行社有限公司</p>
										</div>
										<div>
											<h4>联系电话：</h4>
											<p>13735032614</p>
										</div>
									</div>
								</li>
								<li>
									<img src="img/guide/2.jpg">
									<div class="introduce">
										<div>
											<h4>姓名：</h4>
											<p>袁超凡</p>
										</div>
										<div>
											<h4>单 位：</h4>
											<p>岱山顶鸿旅行社</p>
										</div>
										<div>
											<h4>联系电话：</h4>
											<p>13735032614</p>
										</div>
									</div>
								</li>
								<li>
									<img src="img/guide/3.jpg">
									<div class="introduce">
										<div>
											<h4>姓名：</h4>
											<p>陈洁群</p>
										</div>
										<div>
											<h4>单 位：</h4>
											<p>岱山中青旅旅游有限公司</p>
										</div>
										<div>
											<h4>联系电话：</h4>
											<p>13735032614</p>
										</div>
									</div>
								</li>
								<li>
									<img src="img/guide/1.jpg">
									<div class="introduce">
										<div>
											<h4>姓名：</h4>
											<p>黄珍英</p>
										</div>
										<div>
											<h4>单 位：</h4>
											<p>嵊泗县辉煌旅行社有限公司</p>
										</div>
										<div>
											<h4>联系电话：</h4>
											<p>13735032614</p>
										</div>
									</div>
								</li>
								<li>
									<img src="img/guide/2.jpg">
									<div class="introduce">
										<div>
											<h4>姓名：</h4>
											<p>袁超凡</p>
										</div>
										<div>
											<h4>单 位：</h4>
											<p>岱山顶鸿旅行社</p>
										</div>
										<div>
											<h4>联系电话：</h4>
											<p>13735032614</p>
										</div>
									</div>
								</li>
								<li>
									<img src="img/guide/3.jpg">
									<div class="introduce">
										<div>
											<h4>姓名：</h4>
											<p>陈洁群</p>
										</div>
										<div>
											<h4>单 位：</h4>
											<p>岱山中青旅旅游有限公司</p>
										</div>
										<div>
											<h4>联系电话：</h4>
											<p>13735032614</p>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<iframe src="foot.html" frameborder="0" width="100%" scrolling="no" height="300px"></iframe>
		</div>
	</body>
</html>
